<!--
 * @Author: your name
 * @Date: 2021-11-21 11:49:32
 * @LastEditTime: 2021-12-06 15:40:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shenshan_cim\src\views\Home\xmxz\left\EventFiltering\index.vue
-->
<template>
  <div class="EventFiltering">
    <div class="title">
      <div class="icon">
        <img src="../../../../../assets/images/init/编组 17.png" alt />
      </div>
      <div class="text">可用地推送</div>
    </div>
    <div class="Filtering_box">
      <div class="Filter">
        <div class="tit">
          <span>行政区划</span>
        </div>
        <div class="case">
          <div
            class="case_item"
            @click="administrativeClick(0)"
            :class="administrativeActive == 0 ? 'case_item_active' : ''"
          >
            <div class="case_text">鹅埠街道</div>
          </div>
          <div
            class="case_item"
            @click="administrativeClick(1)"
            :class="administrativeActive == 1 ? 'case_item_active' : ''"
          >
            <div class="case_text">小漠街道</div>
          </div>
          <div
            class="case_item"
            @click="administrativeClick(2)"
            :class="administrativeActive == 2 ? 'case_item_active' : ''"
          >
            <div class="case_text">鲘门街道</div>
          </div>
          <div
            class="case_item"
            @click="administrativeClick(3)"
            :class="administrativeActive == 3 ? 'case_item_active' : ''"
          >
            <div class="case_text">赤石街道</div>
          </div>
        </div>
      </div>
      <div :style="{ marginTop: '30px', marginBottom: '30px' }" class="Filter">
        <div class="tit">
          <span>用地性质</span>
        </div>
        <div class="case">
          <a-tree-select
            v-model="ydxzvalue"
            style="width: 100%"
            allow-clear
            :tree-data="ydxztreeData"
            show-search
            tree-checkable
            dropdownClassName="test"
            :dropdown-style="{
              height: '405px',
              overflow: 'auto',
              width: '500px',
            }"
            :show-checked-strategy="SHOW_PARENT"
            search-placeholder="Please select"
            :treeDefaultExpandAll="true"
          />
        </div>
      </div>
      <div class="Filter">
        <div class="fit"><span>用地面积</span></div>
        <div class="case" style="justify-content:flex-start;margin-left:42px">
          <!-- <el-form-item
            label="产品价格范围"
            class="priceFormItem"
            prop="prodBegin"
          > -->
          <el-input
            v-model.number="ruleForm1.prodBegin"
            oninput="value=value.replace(/[^\d.]/g,'')"
            class="priceInput"
            style="width: 80px;height: 35px; margin-right: 10px"
          />-<el-input
            v-model.number="ruleForm1.prodEnd"
            oninput="value=value.replace(/[^\d.]/g,'')"
            class="priceInput"
            ref="prodEnd"
            style="width: 80px;height: 35px; margin-left: 10px"
          />
          <div class="unit">平方米</div>
          <!-- </el-form-item> -->
        </div>
      </div>
      <div class="Filter">
        <div class="fit"><span>建筑面积</span></div>
        <div class="case" style="justify-content:flex-start;margin-left:42px">
          <!-- <el-form-item
            label="产品价格范围"
            class="priceFormItem"
            prop="prodBegin"
          > -->
          <el-input
            v-model.number="ruleForm2.prodBegin"
            oninput="value=value.replace(/[^\d.]/g,'')"
            class="priceInput"
            style="width: 80px;height: 35px; margin-right: 10px"
          />-<el-input
            v-model.number="ruleForm2.prodEnd"
            oninput="value=value.replace(/[^\d.]/g,'')"
            class="priceInput"
            ref="prodEnd"
            style="width: 80px;height: 35px; margin-left: 10px"
          />
          <div class="unit">平方米</div>
          <!-- </el-form-item> -->
        </div>
      </div>
      <!-- <div class="Filter">
        <div class="tit">
          <span>规划</span>
        </div>
        <div class="case">
          <a-tree-select
            v-model="ghvalue"
            style="width: 100%"
            allow-clear
            :tree-data="ghtreeData"
            show-search
            tree-checkable
            :show-checked-strategy="SHOW_PARENT"
            search-placeholder="Please select"
            :treeDefaultExpandAll="true"
          />
        </div>
      </div> -->
    </div>
    <!-- <div @click="submit" class="submit">
      <div class="icon">
        <img src="../../../../../assets/images/init/执行.png" alt="" />
      </div>
      <div class="zhixing">
        <span>
          执行
        </span>
      </div>
    </div>-->
    <el-button @click="submit" class="submit" :loading="submitLoading">
      <div class="icon">
        <img src="../../../../../assets/images/init/执行.png" alt />
      </div>
      <div class="zhixing">
        <span>分析</span>
      </div>
    </el-button>
  </div>
</template>

<script>
import { getRegion } from "../../../../../api/connect";
import { TreeSelect } from "ant-design-vue";
import { mapActions, mapState } from "vuex";
import { getYdts } from "../../../../../api/connect";
import { editMap } from "../../../../../utils/map";
import { error } from "highcharts";

const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const ydxztreeData = [
  {
    title: "全部",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "M工业工地",
        value: "gy",
        key: 1,
      },
      {
        title: "M1一类工业",
        value: "gy1",
        key: 2,
      },
      {
        title: "M2二类工业",
        value: "gy2",
        key: 3,
      },
      {
        title: "M3三类工业",
        value: "gy3",
        key: 4,
      },
    ],
  },
];
export default {
  data() {
    return {
      // fileList: [],
      ydxzvalue: ["gy", "gy1", "gy2", "gy3"],
      ydxztreeData,

      // 现状选中图层的id
      // xzRes: [],

      SHOW_PARENT,

      // 提交的loading
      submitLoading: false,
      // -----------------------------------------------------------
      // 行政区划的active值
      administrativeActive: 0,
      // 用地面积的值
      ruleForm1: {
        prodBegin: 5000,
        prodEnd: 20000,
      },
      // 建筑面积的值
      ruleForm2: {
        prodBegin: 5000,
        prodEnd: 20000,
      },

      // (用地推送的值)
      YdtsResult: {},
    };
  },
  computed: {
    ...mapState("Sjsx", []),
  },

  watch: {},
  methods: {
    ...mapActions({
      setRadioChoise_act: "Sjsx/setRadioChoise_act",
      setUsablePushActive_act: "Sjsx/setUsablePushActive_act",
      setUsablePushData_act: "Sjsx/setUsablePushData_act",
    }),


    // 获取面数据
    async getData() {
      this.YdtsResult = await getYdts();
      console.log(this.YdtsResult, "用地推送的数据");
    },

    // 行政区划的点击事件
    administrativeClick(val) {
      this.administrativeActive = val;
    },

    // 点击图层树画面方法
    async drawPolygon(polygonData) {
      //   this.setHighlightLoading_act(true);
      const polygon1 = [];
      console.log(polygonData.features, "画面数据");
      this.setUsablePushData_act(polygonData.features);
      polygonData.features.forEach((item, index) => {
        let oo = {
          GroupID: "usablePush",
          id: "polygon_" + item.id + "_" + index + "__1",
          coordinates: item.geometry.coordinates,
          //   id: "polygon_1",
          //   coordinates: [
          //     [602216.5, 2529040.5, 235.10374450683594],
          //     [607887.25, 2526457.25, 26.655000686645508],
          //     [600599.5, 2529051.25, 52.182498931884766],
          //   ],
          userData: JSON.stringify(item),
          color: "#ffffff", //多边形的填充颜色
          //   frameColor: Color.Red, //边框颜色
          frameThickness: 5, //边框厚度
          intensity: 1, //亮度
          style: 0, //单色 请参照API开发文档选取枚举
          depthTest: false, //是否做深度检测
        };
        polygon1.push(oo);
      });
      console.log(polygon1, "polygon1的值");

      await editMap(polygon1, 2);
      await window.__g.polygon.focus(polygon1[1].id, 1500);

      //   await window.__g.polygon.add(polygon1);

      // --- 当图层树选中时 ---
      //   if (check == true) {
      // await window.__g.polygon.add(polygon1);
      // this.setHighlightLoading_act(false);
      //   } else {
      //     // --- 当图层树取消选中时 ---
      //     let polygonIds = [];
      //     polygon1.forEach((item) => {
      //       polygonIds.push(item.id);
      //     });
      //     await window.__g.polygon.delete(polygonIds);
      //     // this.setHighlightLoading_act(false);
      //   }
    },

    // 点击分析的提交事件
    async submit() {
      // 判断【用地面积】的区间值
      if(this.ruleForm1.prodBegin >= this.ruleForm1.prodEnd){
        let changeValue = 0;
        changeValue = this.ruleForm1.prodEnd
        this.ruleForm1.prodEnd = this.ruleForm1.prodBegin
        this.ruleForm1.prodBegin = changeValue
      }
      // 判断【建筑面积】的区间值
      if(this.ruleForm2.prodBegin >= this.ruleForm2.prodEnd){
        let changeValue = 0;
        changeValue = this.ruleForm2.prodEnd
        this.ruleForm2.prodEnd = this.ruleForm2.prodBegin
        this.ruleForm2.prodBegin = changeValue
      }
      
      this.setUsablePushActive_act(false);
      await this.drawPolygon(this.YdtsResult); // 点击分析后，进行画面操作
      this.setUsablePushActive_act(true); // 当为true时，打开右侧的的面板
      console.log(); // 获取到行政区划的值
      console.log(this.ydxzvalue, "---用地性质的值---"); // 获取到用地性质的值
      console.log(this.ruleForm1, "---用地面积的值---"); // 获取到用地面积的值
      console.log(this.ruleForm2, "---建筑面积的值---"); // 获取到建筑面积的值
    },

    onChange(val) {
      console.log(val);
    },

    // bounedButton(){

    //   if(this.IsShowBoune==false){
    //       this.IsShowBoune=true
    //   }else{
    //       this.IsShowBoune=false
    //   }
    //     console.log(11111111111);
    // }
  },
  created() {
    // this.$store.dispatch("Sjsx/setIsUploadRegion_act", false);
    // this.$store.dispatch("Sjsx/setIsDrawRegion_act", false);
    // this.$store.dispatch("Sjsx/setOpenPolygonDraw_act", false);
  },
  mounted() {
    this.getData();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
/deep/.ant-select-tree-dropdown {
  left: 300px !important;
}
.EventFiltering {
  //   top: 0;
  //   position: absolute;
  width: 92%;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 2px;
  //   margin: 20px auto;
  //   border: 1px solid #fff;
  background: linear-gradient(
      180deg,
      rgba(0, 50, 105, 0.432802) 0%,
      rgba(4, 17, 32, 0.5) 100%
    ),
    rgba(0, 5, 10, 0.334353);
  height: 405px;
  border-radius: 0 4px 4px 0;
  .title {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #4672a4a1;
    padding-bottom: 5px;
    font-size: 18px;
    .icon {
      width: 13px;
      height: 13px;
      margin: 0 13px 0 5px;
      img {
        width: 100%;
      }
    }
  }
  .Filtering_box {
    margin: 1px 0;
    height: 290px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      // background: -webkit-gradient(
      //             linear,
      //             left top,
      //             left bottom,
      //             from(#83a6a6),
      //             to(#483d8b)
      // );
      // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
      background: linear-gradient(
        180deg,
        rgba(131, 166, 166, 0.1),
        rgba(131, 166, 166, 0.8),
        rgba(131, 166, 166, 0.1)
      );
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
    .Filter {
      margin: 30px 0;

      display: flex;
      justify-content: space-around;
      color: #fff;
      align-items: center;

      .tit {
        width: 30%;
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 21px;

        color: #ffffff;
      }
      .case {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        // justify-content: space-around;
        justify-content: space-between;
        width: 70%;
        .case_item_active {
          background: #5b9bd5;
        }
        .case_item {
          height: 38px;
          width: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 5px;

          .case_text {
            width: 40px;
            text-align: center;
          }
        }
        .unit {
          padding-left: 6px;
        }
        /deep/ .ant-radio-wrapper {
          color: #fff;
        }
        /deep/ .ant-radio-inner {
          background: rgba(255, 255, 255, 0.644);
        }
        /deep/ .ant-radio-button-wrapper:last-child {
          border-radius: 4px;
        }

        /deep/.ant-radio-button-wrapper {
          color: #ffffff;

          background: rgba(255, 255, 255, 0.1);
          box-sizing: border-box;
          padding: 0 10px;
          border: 1px solid rgba(255, 255, 255, 0.2);
        }
        /deep/.ant-upload-list,
        .ant-upload-list-text {
          position: absolute;
          left: 0px;
          right: 0;
          margin-top: 3px;
          border-radius: 4px;
          display: block;
          color: rgb(255, 255, 255);
          z-index: 10;
          background: rgba(0, 0, 0, 0.342);
        }
        /deep/ .ant-upload-list-item-info .anticon-loading,
        .ant-upload-list-item-info .anticon-paper-clip {
          color: #fff;
        }
        /deep/ .ant-select,
        .ant-select-enabled {
          width: 100%;
        }
        /deep/ .ant-select-selection {
          background: rgba(0, 0, 0, 0.144);
          color: #fff;
        }
        /deep/ .ant-select-arrow {
          color: #ffffff;
        }
        /deep/.ant-btn:hover,
        .ant-btn:focus,
        .ant-btn:active,
        .ant-btn.active {
          background: rgba(0, 0, 0, 0);
        }
        /deep/.ant-btn {
          background: rgba(0, 0, 0, 0);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-around;
          border: none;
          padding: 0 10px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          background: rgba(255, 255, 255, 0.1);
          width: 80px;
        }
      }
    }
  }
  .submit {
    width: 100%;
    height: 45px;
    background: #89b8e346;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: aqua;
      transform: scale(0.9);
    }
    .icon {
      margin: 0 10px;
      img {
        width: 16px;
      }
    }
    .zhixing {
      font-size: 14px;
    }
    &::before {
      position: absolute;

      width: 101%;
      height: 101%;
      top: 0;
      left: 0;
      background: url("../../../../../assets/images/init/btnwrap.png") no-repeat
        center/cover;
      z-index: 10;
      content: "";
    }
  }
}
</style>
<style lang="scss">
/* 两个按钮样式 */
.ant-select-selection--multiple .ant-select-selection__choice {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.ant-select-selection--multiple .ant-select-selection__choice__remove {
  color: #ffffff;
}
.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
  color: rgba(42, 130, 245, 0.85);
}
.ant-radio-button-wrapper:not(:first-child)::before {
  width: 0px;
}

/* 下拉框列表样式 */
// 整体背景
.ant-select-dropdown {
  background: rgba(11, 48, 64, 0.73);
  top: 585px !important;
  left: 420px !important;

  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    // background: -webkit-gradient(
    //             linear,
    //             left top,
    //             left bottom,
    //             from(#83a6a6),
    //             to(#483d8b)
    // );
    // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
    background: linear-gradient(
      180deg,
      rgba(131, 166, 166, 0.1),
      rgba(131, 166, 166, 0.8),
      rgba(131, 166, 166, 0.1)
    );
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}
.ant-select-tree {
  font-size: 20px;
}
.ant-select-selection {
  font-size: 15px;
}
// 复选框文字
.ant-select-tree li .ant-select-tree-node-content-wrapper {
  color: #ffffff;
}
.anticon {
  color: #ffffff;
}
// 全选框的背景颜色
.ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner::after {
  background: rgba(10, 165, 231, 0.6);
}
.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
  background-color: rgba(172, 230, 255, 0);
  border-color: #ace6ff;
}
.ant-select-tree-checkbox-inner {
  border-color: rgba(172, 230, 255, 0.5);
  background: rgba(172, 230, 255, 0);
}
// 鼠标移上去的hover事件
.ant-select-tree li .ant-select-tree-node-content-wrapper:hover {
  background-color: rgba(172, 230, 255, 0.5);
}
.ant-upload-list-item:hover .ant-upload-list-item-info {
  background-color: rgba(172, 230, 255, 0.5);
  height: 100%;
}
// 清除
.ant-select-selection__clear {
  color: #ffffff;
  background: rgba(172, 230, 255, 0);
}

.el-button {
  border: none;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
}

.el-radio {
  display: flex;
  align-items: center;
  font-weight: 400;
}
.el-radio__label {
  font-size: 16px;
}

// loading
.el-icon-loading {
  color: #ffffff;
  margin-bottom: 3px;
  font-size: 14px;
}

// input

.el-input {
  width: 80px;
  .el-input__inner {
    height: 35px;
    color: #ffffff;
    background: linear-gradient(
        180deg,
        rgba(0, 50, 105, 0.432802) 0%,
        rgba(4, 17, 32, 0.5) 100%
      ),
      rgba(0, 5, 10, 0.334353);
  }
}
</style>
